import { LoadingOutlined } from '@ant-design/icons';
import { ConfigProvider, Empty, Spin } from 'antd';
import { useTranslation } from 'react-i18next';

import useDarkMode from '@/hooks/useDarkMode';
import useScreenSize from '@/hooks/useScreenSize';

import dark from './theme/dark';
import light from './theme/light';

ConfigProvider.config({
  prefixCls: 'x',
  iconPrefixCls: 'x',
});

// 设置默认Loader
Spin.setDefaultIndicator(<LoadingOutlined style={{ fontSize: 20 }} spin />);

const GlobalConfig: React.FC<{ children: JSX.Element }> = props => {
  const { children } = props;
  const { t } = useTranslation();
  const { isMobile } = useScreenSize();
  const { currentDarkMode } = useDarkMode();

  // 渲染主题
  const themeColor = currentDarkMode === 'light' ? light : dark;

  // 渲染空组件
  const renderEmpty = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('empty')} />;

  return (
    <ConfigProvider
      theme={themeColor}
      prefixCls="x"
      renderEmpty={renderEmpty}
      space={{ size: isMobile ? 'small' : 'middle' }}
    >
      {children}
    </ConfigProvider>
  );
};

export default GlobalConfig;
